<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style-type: none;
        }
        ul{
            width:250px;
        }
        ul li{
            overflow: hidden;
            width: 100%;
            height:30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid red;
            cursor: pointer;
        }
        ul li h3{
            width: 100%;
            background-color: brown;
            
        }
        ul li p{
            width:100%;
            background-color: darkgray;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <h3>蔬菜</h3>
            <p>茄子</p>
            <p>芹菜</p>
            <p>韭菜</p>
            <p>蒜苔</p>
        </li>
        <li>
            <h3>用的</h3>
            <p>手机</p>
            <p>游戏机</p>
            <p>水杯</p>
            <p>电脑</p>
        </li>
        <li>
            <h3>吃的</h3>
            <p>香蕉</p>
            <p>苹果</p>
            <p>梨</p>
            <p>荔枝</p>
        </li>
    </ul>
    <script>
        //1.给所有li添加点击事件,展开菜单
        var oLis = document.getElementsByTagName("li");
        var oP = document.getElementsByTagName("p");
        var bool = true;
        //循环给每个li添加点击事件
        for(var i=0;i<oLis.length;i++){
            //自定义属性控制开关
            oLis[i].bool=true;
            oLis[i].onclick = function(){
                //通过判断自定义属性控制开关
                if(this.bool){
                    for(var j=0;j<oLis.length;j++){
                        oLis[j].style.height="30px";//如果为真把所有li设为初始值
                        oLis[j].bool=true;//把开关设为初始状态,关闭状态
                    }
                    this.style.height='auto';//把当前li高度设为auto撑开菜单
                    this.bool = !this.bool;//当前对象取反bool
                }else{
                   this.style.height='30px';//设置为初始值关闭菜单
                   this.bool = !this.bool;//取反bool
                }  
                for(var k =0;k<oP.length;k++){
                    oP[k].onmouseenter = function(){
                       this.style.backgroundColor="yellow"; 
                    }
                    oP[k].onmouseleave = function(){
                       this.style.backgroundColor="darkgray"; 
                    }
                } 
            }
        }
    </script>
</body>
</html>